<template>
    <div class="transition_hun">
        <div class="hunter_container">
            <div class="img" :style="{
                backgroundImage: `url(${hunPictureUrl})`
            }"></div>
        </div>
        <div class="name_space">
            <p>{{ hunInfo.hunPlayerName }}</p>
            <div class="talent_container">
                <img v-if="hunInfo.hunTalent.dp" src="../../assets/images/talent/底牌.png">
                <img v-if="hunInfo.hunTalent.zk" src="../../assets/images/talent/张狂.png">
                <img v-if="hunInfo.hunTalent.wl" src="../../assets/images/talent/挽留.png">
                <img v-if="hunInfo.hunTalent.jbkj" src="../../assets/images/talent/禁闭空间.png">
            </div>
        </div>
    </div>
</template>

<script setup lang='ts' name="TransitionHun">
const props = defineProps<{
    hunInfo: HunInfo
}>();
const hunPictureUrl = ref('');
const { stop } = watch(() => props.hunInfo.hunChar, (newVal) => {
    import(`@/assets/images/hunHalf/${newVal}.png`).then(res => {
        hunPictureUrl.value = res.default;
    });
})

onUnmounted(() => {
    stop();
})
</script>
<style scoped lang='scss'>
.transition_hun {
    width: 100%;
    height: 100%;
    grid-area: Right;
    display: grid;
    grid-template-rows: auto 40px;
    background:url("@/assets/images/transition-bg.png");
    .hunter_container {
        height: 100%;
        width: 100%;
        position: relative;
        background: linear-gradient(to bottom, transparent 0%, transparent 70%, #c0563990 100%);
        .img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            transition: background-image 0.3s;
            background-size: auto 100%;
            /* 高度填满，宽度按比例缩放 */
            background-position: center;
            /* 让图片居中 */
            background-repeat: no-repeat;
        }
    }

    .name_space {
        background: #000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1em;
        color: #fff;

        .talent_container {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            img {
                height: 30px;
                width: 30px;
            }
        }
    }
}
</style>